<%var obj={pageTitle:"学生列表"}%>
{{include "../header.html" obj}}
<div class=" container">
    {{include "../pageHeader.html" obj}}
    <form method="GET" action="/Stu_h1802/queryByList" class=" form-inline" style="margin:3px 0">
        <div class=" form-group">
            <label for="" class=" control-label">学号</label>
            <input type="text" class=" form-control" placeholder="请输入学号查询" name="s_id">
        </div>
        <div class=" form-group">
            <label for="" class=" control-label">姓名</label>
            <input type="text" class=" form-control" placeholder="请输入姓名查询" name="s_name">
        </div>
        <div class=" form-group">
            <label for="" class=" control-label">性别</label>
            <select class=" form-control" name="s_sex">
                <option value="">-请选择-</option>
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div class=" form-group">
            <button type="submit"  class=" btn btn-primary">
                <span class=" glyphicon glyphicon-search"></span>查询
            </button>
        </div>
    </form>
    <div class="btn-group">
        <!--将A标签转换成按钮样式-->
        <a href="/Stu_h1802/addStudent" class=" btn btn-primary">
            <span class=" glyphicon glyphicon-plus"></span>新增
        </a>
        <button type="button" class=" btn btn-warning">
            <span class=" glyphicon glyphicon-pencil"></span>修改
        </button>
        <button type="button" class=" btn btn-danger btn-delete-checked">
            <span class=" glyphicon glyphicon-trash"></span>批量删除
        </button>
    </div>
    <div class=" table-responsive">
        <table class=" table table-bordered table-hover table-striped">
            <tr>
                <td>
                    <label for="ckAll">
                        <input type="checkbox" id="ckAll" data-toggle="ckAll">全选
                    </label>
                </td>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>QQ</td>
                <td>学校</td>
                <td>专业</td>
                <td>学历</td>
                <td>操作</td>
            </tr>
            {{each listData item index}}
            <tr>
                <td>
                    <input type="checkbox" name="ck" value="{{item.s_id}}">
                </td>
                <td>{{item.s_id}}</td>
                <td>{{item.s_name}}</td>
                <td>{{item.s_sex}}</td>
                <td>{{item.s_age}}</td>
                <td>{{item.s_qq}}</td>
                <td>{{item.s_school}}</td>
                <td>{{item.s_major}}</td>
                <td>{{item.s_education}}</td>
                <td>
                    <!--请求地址不可变
                        请求参数可变
                        后端跨页面传值
                    -->
                    <a href="/Stu_h1802/editStudent?s_id={{item.s_id}}" class=" btn label label-warning">编辑</a>
                    <button type="button" class=" btn label label-danger btn-delete" data-s_id="{{item.s_id}}">删除</button>
                </td>
            </tr>
            {{/each}}
        </table>
    </div>
    <!--去给上一个分页
        假设pageCount:5
    -->
    <ul class=" pagination pull-right">
        <%for(var i=1;i<=pageCount;i++){%>
            {{if pageIndex==i}}
            <li class="active"><a href="/Stu_h1802/queryByList?pageIndex={{i}}">{{i}}</a></li>
            {{else}}
            <li><a href="/Stu_h1802/queryByList?pageIndex={{i}}">{{i}}</a></li>
            {{/if}}
        <%}%>
    </ul>
</div>
<script type="text/javascript">
    $(function(){
        $(".btn-delete").click(function(){
            if(confirm("你确定要删除吗？")){
                //我现在要根据学号（s_id）
                // var s_id=$(this).parent().parent().children("td").eq(1).text().trim();
                var s_id=$(this).data("s_id").trim();
                $.get("/Stu_h1802/deleteById?s_id="+s_id,function(data){
                    //这一个data代表后台传递过来的值
                    //后面返回的是一个JSON数据
                    var jsonObj=JSON.parse(data);
                    if(jsonObj.status=="success"){
                        alert("删除成功");
                        location.reload();
                    }
                    else{
                        alert(jsonObj.msg);
                    }
                });
            }
        });
        
        //面试原题：
        //如果通过Ajax向后台传递多条数据？
        //如果通过Ajax向后台传递数组？
        $(".btn-delete-checked").click(function(){
            //看是否有选中项
            if($("input[name='ck']:checked").length>0){
                if(confirm("你确定要删除选中项吗")){
                    //获取选项的s_id
                    var s_idArr=[];
                    $("input[name='ck']:checked").each(function(index,item){
                        //遍历选中的所有项，获取选中的s_id
                        s_idArr.push($(this).val());
                    });
                    
                    $.get("/Stu_h1802/deleteByChecked?s_idArr="+s_idArr.join("-"),function(pageJson){
                        //var jsonObj=JSON.parse(pageJson);
                        //将JSON字符串转换成JS对象
                        //后台如果使用了resp.json()传输，那么，我接收到的，就直接是一个对象
                        var jsonObj=pageJson;
                        if(jsonObj.status=="success"){
                            //说明成功
                            alert("批量删除成功");
                            location.reload();
                        }
                        else{
                            alert(jsonObj.msg);
                        }
                    });
                    
                }
            }
            
        });
    })
</script>

{{include "../footer.html"}}